@font-face {
	font-family: 'NotoSansDisplay';
	src: url('../fonts/NotoSansDisplay-Regular.ttf') format('truetype'),
		url('../fonts/NotoSansDisplay-Regular.otf') format('truetype');
}

body{
	background: rgb(245,245,245);
	color: #707070;
	font-family:NotoSansDisplay;
	font-size: 14px;
}
button{
	font-family:NotoSansDisplay;
}
input{
	font-family:NotoSansDisplay;
}
body,html{
	
}
input::-webkit-input-placeholder { /* WebKit browsers */ 

font-style: italic;
color: #9d9d9d; 

} 

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 

color: #9d9d9d; 
} 

input::-moz-placeholder { /* Mozilla Firefox 19+ */ 

color: #9d9d9d; 

} 

input:-ms-input-placeholder { /* Internet Explorer 10+ */ 

color: #9d9d9d; 

} 
.photos-list{
	width: 100%;
	overflow: hidden;
	.zl-scrollContentDiv{
		top: 0!important;
	}
	.file{
		margin-bottom: 15px;
		position: relative;
		height: 140px;
		.desc{
			position: relative;
			width: 100%;
			height: 100%;
			background-color: none;
			border: 2px dashed #ccc;
			// background: url(../images/by.png) no-repeat ;
			background: none;
			background-size: 100% 100%;
			text-align: center;
			border-radius: 8px;
			box-sizing: border-box;
			font-style: italic;
			font-size: 14px;
			.box{
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				width: 100%;
			}
			p{
				text-align: center;
				color: #9D9D9D;
				font-size: 14px;
			}
			.t2{
				margin: 10px 0;
			}
		}
		input{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 2;
		}
	}
	.content-img{
		padding-bottom: 10px;
		height: 90px;
	}
	ul{
		display: flex;
	}
	li{
		position: relative;
		margin-right: 10px;
		&:last-child{
			margin-right: 0;
		}
		img{
			width: 80px;
			height: 80px;
		}
		& > div{
			position: absolute;
			left: 0;
			bottom: 0;
			text-align: center;
			width: 100%;
			background: rgba(0, 0, 0, .4);
			height: 100%;
			line-height: 80px;
			a{
				position: relative;
				display: block;
				width: 100%;
				height: 100%;
				color: #fff;
				cursor: pointer;
			}
			.gcllajitong{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				display: block;
				width: 25px;
				height: 25px;
				background: url(../images/del.png) no-repeat center;
				background-size: cover;
				z-index: 2;
			}
		}
	}
}
.g-header{
	position: relative;
	margin-bottom: 35px;
	display: flex;
	align-items: center;
	height: 40px;
	.left{
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		padding: 0;
		width: 240px;
		.logo{
			width: 150px;
			img{
				width: 100%; 
			}
		}
	}
	.right{
		padding-left: 240px;
		flex: 1;
		height: 40px;
		.component{
			overflow: hidden;
			.tabs{
				float: left;
				display: flex;
				align-items: center;
				line-height: 30px;
				font-size: 22px;
				a{
					margin-right:35px;
					text-align: center;
					display: block;
					padding-bottom: 5px;
					color: #707070;
					border-bottom: 3px solid transparent;
					&:last-child{
						margin-right: 0;
					}
					&.active{
						border-color: #e8984a;
						color: #d07d2d;
					}
				}
			}
			.user{
				float: right;
				ul{
					display: flex;
					align-items: center;
					li{
						margin-right: 22px;
						&:last-child{
							margin-right: 0;
						}					
					}
				}
				.user-button{
					font-size: 18px;
					line-height: 32px;
					color: #4b4b4b;
					span{
						margin-left: 5px;
					}
				}
			}
		}
	}
}
.img{
	font-size: 0;
	img{
		max-width: 100%;
	}
}
.g-title{
	margin-bottom: 30px;
	h3{
		font-size: 26px;
		font-weight: bold;
		line-height: 35px;
		color: #d07d2d;
	}
}
button{
	cursor: pointer;
}
.g-table{
	.theader{
		padding-bottom: 6px;
		border-bottom: solid 2px #bababa;
		ul{
			display: flex;
			font-size: 14px;
			color: #707070;
		}
		li{
			width: 25%;
			box-sizing: border-box;
			&:nth-child(1){
				padding-left: 30px;
			}
			button{
				display: flex;
				align-items: center;
				background: none;
				border: none;
				color: #707070;
				&::after{
					content: '';
					width: 24px;
					height: 24px;
					background: url(../images/icon_14.png) no-repeat center;
					transition: all .3s;
				}
				&.active{
					&::after{
						transform: rotate(180deg);
					}
				}
			}
		}
	}
	.tbody{
		width: 100%;
		li{
			padding: 10px 0;
			display: flex;
			line-height: 36px;
			border-bottom: solid 1px #eaeaea;
			& > div{
				width: 25%;
			}
			button{
				background: none;
				border: none;
				font-size: 16px;
				color: #d07d2d;
				cursor: pointer;
			}
			.name{
				display: flex;
				img{
					margin-right: 10px;
					display: block;
					border-radius: 50%;
					width: 36px;
					height: 36px;
				}
			}
			.btns{
				text-align: right;
			}
			.reset-button{
				margin-right: 22px;
			}
		}
	}
}
.g-button-style{
	width: 60px;
	height: 36px;
	background: none;
	border: 2px solid #d07d2d;
	font-size: 18px;
	color: #d07d2d;
	transition: all .3s;
	border-radius: 4px;
	&:hover{
		background: #d07d2d;
		color: #fff;
	}
	
}
.g-button-wrap{
	button{
		background: none;
		border: none;
		width: 86px;
		text-align: center;
		font-size: 18px;
		color:#9d9d9d;
		border-radius: 4px;
		cursor: pointer;
		border: solid 2px transparent;
		transition: all .3s;
	}
	.colse-button,.border{
		border-color:#e8984a;
		color: #e8984a;
		&:hover{
			background-color: #e8984a;
			color: #fff;
		}
	}
	.create-button{
		background-color: #e8984a;
		color: #fff;
		border-color: #e8984a;
	}
}
.g-button{
	width: 86px;
	height: 36px;
	background-color: #e8984a;
	border-radius: 4px;
	text-align: center;
	color: #fff;
	font-size: 18px;
	border: none;
	cursor: pointer;
}
.input-box{
	position: relative;
	min-height: 24px;
	width: 100%;
	input{
		display: block;
		width: 100%;
		height: 100%;
		border: none;
		font-size: 14px;
		background: none;
	 
	}
}
.input-radio{
	padding: 5px 0;
	display: flex;
	align-items: center;
	label{
		margin-right: 15px;
		cursor: pointer;
		&:last-child{
			margin-right: 0;
		}
	}
}
.input-textarea{
	.text{
		display: block;
		border: 1px solid #cccccc;
		border-radius: 4px;
		background: #fff;
		width: 100%;
		height: 150px;
		resize: none;
		padding: 10px;
		box-sizing: border-box;
	}
	textarea::-webkit-input-placeholder{
		color: #9d9d9d;
	}
	textarea::-moz-input-placeholder{
		color: #9d9d9d;
	}
	textarea::-ms-input-placeholder{
		color: #9d9d9d;
	}
}
.g-checkbox,.g-radio{
	display: flex;
	height: 16px;
	align-items: center;
	cursor: pointer;
	input{
		display: none;
	}
	i{
		position: relative;
		margin-right: 5px;
		display: block;
		width: 12px;
		height: 12px;
		border: 2px solid rgb(186,186,186);
		border-radius: 2px;
		box-sizing: border-box;
		&::before{
			display: none;
			content: '';
			position: absolute;
			top: -2px;
			left: -2px;
			width: 12px;
			height: 12px;
			background: url(../images/icon_02.png) no-repeat center;
			background-size:12px;
			z-index: 1;
		}
	}
	input:checked + i{
		border-color: rgb(208,125,45);
	}
	input:checked + i::before{
		display: block;
	}
}
.g-radio{
	i{
		border-color: #bababa;
		border-radius: 50%;
		&::before{
			width: 6px;
			height: 6px;
			top: 50%;
			left: 50%;
			margin: -3px 0 0 -3px;
			border-radius: 6px;
			background: #e8984a;
		}
	}
	input:checked + i{
		border-color: #e8984a;
		background: none;
	}
	input:checked + i::before{
		display: block;
	}
}
.shade{
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99;
	background: rgba(0,0,0,.6);
}
.img{
	font-size: 0;
}
.login-box{
	position: relative;
	width: 100%;
	height: 100vh;
	background: rgb(245,245,245);
	.bd{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		display: flex;
		width: 920px;
		height: 450px;
		background: #fff;
		box-shadow: 0px 2px 6px 0px rgba(32, 29, 51, 0.1);
		border-radius: 4px;
		.tit{
			margin-bottom: 45px;
		}
		.img{
			width: 450px;
		}
		.form{
			padding:80px 80px 0 80px;
			flex: 1;
			li{
				margin-bottom: 20px;
			}
			label{
				display: block;
				font-size: 14px;
				line-height: 24px;
				color: #707070;
			}
			input{
				display: block;
				padding: 0 15px;
				box-sizing: border-box;
				width: 100%;
				height: 36px;
				background-color: #ffffff;
				border-radius: 4px;
				border: solid 1px #cccccc;
				&::-webkit-input-placeholder{
					color: #9d9d9d;
				}
				&::-moz-input-placeholder{
					color: #9d9d9d;
				}
				&::-ms-input-placeholder{
					color: #9d9d9d;
				}
			}
			.submit{
				text-align: right;
				button{
					width: 80px;
					height: 36px;
					background-color: #e8984a;
					border-radius: 4px;
					border: none;
					font-size: 18px;
					color: #fff;
					cursor: Pointer;
				}
			}
		}
	}
}
.main{
	border-top: 4px solid #d07d2d;
	padding: 40px;  
}

xm-select{
	border: none!important;
	border-radius: 0!important;
	background: none!important;
}
xm-select > .xm-tips{
	padding: 0!important;
	font-style: italic;
}
xm-select > .xm-icon{
	border: none!important;
	margin-top: -12px!important;
	width: 20px!important;
	height: 100%!important;
	background: url(../images/icon_06.png) no-repeat center;
	background-size: 10px 6px;
	&.xm-icon-expand:before{
		display: none;
	}
}
xm-select > .xm-label.single-row{
	position: static!important;
}
xm-select > .xm-label.single-row .scroll{
	
}
xm-select > .xm-label .scroll .label-content{
	padding: 3px 0!important;
	flex-wrap: wrap!important;
}
xm-select .xm-label .xm-label-block{
	height: 24px!important;
	line-height: 24px!important;
	background: #fff!important;
	border-radius: 5px!important;
	border: 1px solid #9D9D9D;
	& > i{
		line-height: 1;
	}
	& > span,& > i{
		color: #2D2D2D!important;
	}
}
xm-select .xm-body .xm-option .xm-option-icon{
	border-color: rgb(208,125,45)!important;
}
xm-select .xm-body .selected  .xm-option-icon{
	color: rgb(208,125,45)!important;
}
.browse-box{
	&.browse-box-style{
		.hd{
			.left{
				width: 290px;
				font-size: 22px;
				font-family:NotoSansDisplay;
				.logo{
					
				}
				span{
					margin: 0 7px;
				}
				a{
					color: #d07d2d;
					display: flex;
					align-items: center;
				}
			}
		}
	}
	.hd{
	
	}
	.bd{
		position: relative;
		display: flex;
		.sidebar{
			position: absolute;
			top: 0;
			left: 0;
			padding: 0 40px 0 0;
			box-sizing: border-box;
			width: 250px;
			.title{
				margin-bottom: 20px;
				font-size: 20px;
				color: #707070;
			}
			.input-box{
				position: relative;
				border-bottom: 1px solid rgb(204,204,204);
				select{
					width: 100%;
					height: 24px;
				}
				input{
					min-height: 30px;
				}
				.icon{
					position: absolute;
					top: 50%;
					right: 0;
					margin-top: -12px;
					width: 20px;
					height: 100%;
					background: url(../images/icon_06.png) no-repeat center;
					background-size: 10px 6px;
				}
			}
			.serach-item,.time-item{
				margin-bottom: 20px;
				label{
					display: block;
					margin-bottom: 5px;
				}
				
			}
			.serach-item{
				.input-box{
					height: auto;
					min-height: 30px;
				}
			}
			.time-item{
				.input-box{
					i{
						position: absolute;
						top: 50%;
						right: 0;
						margin-top: -10px;
						width: 20px;
						height: 20px;
						background: url(../images/icon_09.png) no-repeat center;
					}
				}
			}
			.filter-item{
				li{
					margin-bottom: 10px;
					& > a{
						display: flex;
						align-items: center;
						line-height: 36px;
						i{
							margin-right: 5px;
							display: block;
							width: 6px;
							height: 10px;
							background: url(../images/icon_07.png) no-repeat center;
							background-size: 100% 100%;
							transition: all .3s;
						}
						&.open{
							color: #000;
							font-weight: bold;
							i{
								transform: rotate(90deg);
							}
						}
					}
					.childer{
						display: none;
						dd{
							margin-bottom: 11px;
							line-height: 1;
							font-size: 12px;
							&:last-child{
								margin-bottom: 0;
							}
						}
					}
				}
			}
		}
		.content{
			padding-left: 250px;
			flex: 1;
			.serch{
				margin: 0 0 35px;
				position: relative;
				z-index: 2;
				.form-wrap{
					display: flex;
					align-items: center;
				}
				.input-box{
					position: relative;
					width: 450px;
					height: 36px;
					input{
						padding: 0 20px 0 44px;
						box-sizing: border-box;
						display: block;
						width: 100%;
						height: 100%;
						background-color: #ffffff;
						border-radius: 4px;
						border: solid 1px #cccccc;
						&::-moz-placeholder{
							color: #cccccc;
						}
						&::-webkit-placeholder{
							color: #cccccc;
						}
						&::-ms-placeholder{
							color: #cccccc;
						}
					}
					.submit-button{
						position: absolute;
						top: 0;
						left: 0;
						width: 44px;
						height: 100%;
						background: url(../images/icon_11.png) no-repeat center;
						background-size: 24px 24px;
						border: none;
						background-color: none;
						cursor: pointer;
					}
				}
				.buttons{
					padding: 0 20px;
					button{
						width: 70px;
						height: 32px;
						border-radius: 4px;
						font-size: 14px;
						color: #707070;
						text-align: center;
						background: none;
						border: solid 1px transparent;
						cursor: pointer;
						&.active{
							border-color: #e8984a;
							color:#e8984a;
						}
					}
				}
				.create-button{
					position: absolute;
					top: 0;
					right: 0;
					width: 86px;
					height: 36px;
					background-color: #e8984a;
					border-radius: 4px;
					text-align: center;
					color: #fff;
					font-size: 18px;
					border: none;
					cursor: pointer;
				}
			}
			.product-list{
				overflow: hidden;
				height: calc(~"100vh - 230px");
				ul{
					margin-right: -1.2%;
					overflow: hidden;
				}
				li{
					float: left;
					margin: 0 2% 18px 0;
					box-shadow: 0px 2px 6px 0px rgba(32, 29, 51, 0.1);
					border-radius: 4px;
					padding: 10px;
					width: 18.0%;
					box-sizing: border-box;
					background: #fff;
					.tit{
						margin-bottom: 10px;
						display: flex;
						align-items: center;
						justify-content: space-between;
						span{
							color: #2D2D2D;
						}
						.buttons{
							display: flex;
							align-items: center;
							button{
								background: none;
								border: none;
								cursor: pointer;
							}
							.btn1{
								margin-right: 10px;
								width: 18px;
								height: 18px;
								line-height: 1;
								background: url(../images/icon_10.png) no-repeat center;
								background-size: cover;
							}
							.more{
								position: relative;
								line-height: 1;
								font-size: 0;
								.result{
									width: 25px;
									height: 25px;
									line-height: 1;
									background: url(../images/icon_12.png) no-repeat ;
									background-size: 100% 100%;
									&.open{
										background: url(../images/icon_13.png) no-repeat;
									}
								}
								.select{
									display: none;
									position: absolute;
									top: 32px;
									left: -85px;
									width: 110px;
									padding: 15px;
									box-sizing: border-box;
									background-color: #ffffff;
									box-shadow: 0px 2px 6px 0px rgba(32, 29, 51, 0.1);
									border-radius: 4px;
									a{
										display: block;
										line-height: 24px;
										font-size: 14px;
										color: #707070;
									}
								}
							}
						}
					}
					.big-img{
						margin-bottom: 10px;
						width: 100%;
						height: 173px;
						a{
							width: 100%;
							height: 100%;
							display: block;
						}
						img{
							display: block;
							width: 100%;
							height: 100%;
						}	
					}
					.bottom{
						display: flex;
						align-items: center;
						.number{
							flex: 1;
							text-align: center;
							font-size: 15px;
							color: #707070;
						}
					}
					.small-img{
						display: flex;
						align-items: center;
						a{
							margin-right: 10px;
							display: block;
							width: 75px;
							height: 75px;
							border-radius: 4px;
							overflow: hidden;
							&:last-child{
								margin-right: 0;
							}
							img{
								display: block;
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
		}
	}
}
.new-parameter{
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	padding: 30px 40px 40px;
	box-sizing: border-box;
	width: 900px;
	background: #fff;
	border-top: 4px solid #d07d2d;
	box-shadow: 0px 2px 6px 0px rgba(32, 29, 51, 0.1);
	border-radius: 4px;
	z-index: 99;
	.hd{
		margin-bottom: 20px;
		font-size: 26px;
		color: #4b4b4b;
	}
	.bd{
		display: flex;
		.g-parameter{
			.tit{
				margin-bottom: 5px;
				font-size: 14px;
				line-height: 20px;
				color: #707070;
			}
		}
	}
	.btns{
		position: absolute;
		right: 40px;
		bottom: 40px;
		button{
			background: none;
			border: none;
			line-height: 36px;
			width: 86px;
			text-align: center;
			font-size: 18px;
			color:#9d9d9d;
			border-radius: 4px;
			cursor: pointer;
		}
		.confirm-button{
			margin-left: 10px;
			color: #fff;
			background: #e8984a;
		}
		.disabled{
			background: #eaeaea;
			color: #bababa;
		}
		
	}
}
.g-parameter{
	width: 300px;
	li{
		margin-bottom: 20px;
		.tit{
			margin-bottom: 5px;
			color: #8B8B8B;
		}
		.input-box{
			border-bottom: 1px solid rgb(204,204,204);
		}
		&:last-child{
			margin-bottom: 0;
		}
		.content{
			color: #2D2D2D;
			font-size: 12px;
		}
	}
}
.g-style-list{
	padding: 0 40px 0 80px;
	flex: 1;
	display: flex;
	justify-content: space-between;
	.tit{
		margin-bottom: 10px;
	}
	dl{
		margin-bottom: 50px;
		width: 160px;
		&:last-child{
			margin-bottom: 0;
		}
		dd{
			margin-bottom:10px;
			color: #707070;
			font-size: 12px;
			span{
				margin-left: 5px;
			}
		}
	}
}
.user-box{
	padding: ;
	background: #fff;
	padding: 30px;
	box-sizing: border-box;
	width: 100%;
	box-shadow: 0px 2px 6px 0px rgba(32, 29, 51, 0.1);
	border-radius: 4px;
	.user-box-top{
		margin-bottom: 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		h3{
			font-size: 26px;
			line-height: 1.4;
			color: #d07d2d;
		}
		button{
			width: 102px;
			height: 36px;
			background: rgb(232,152,74);
			color: #fff;
			border: none;
			font-size: 17px;
			border-radius: 5px;
		}
	}
	.user-box-content{
		
	}
}

.summary-box{
	.hd{
		margin-bottom: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 40px;
		h3{
			font-size: 26px;
			color: #4b4b4b;
			font-weight: bold;
		}
		
	}
	.bd{
		.item{
			margin-bottom: 20px;
			padding: 30px;
			background: #fff;
			box-shadow: 0px 2px 6px 0px rgba(32, 29, 51, 0.1);
			border-radius: 4px;
			&:last-child{
				margin-bottom: 0;
			}
		}
		.information{
			position: relative;
			.content{
				display: flex;
				p{
					line-height: 24px;
				}
			}
			.stetup-photos{
				padding-right: 5%;
				width: 30%;
				.photos-wrap{
					margin-bottom: 20px;
					position: relative;
					width: 100%;
					height: 300px;
					.img{
						width: 100%;
						height: 100%;
					}
					img{
						width: 100%;
						height: 100%;
						// position: absolute;
						// top: 50%;
						// left: 50%;
						// transform: translate(-50%,-50%);
					}
				}
				.optional{
					margin-bottom: 10px;
					width: 100%;
					.tit{
						margin-bottom: 5px;
						font-size: 14px;
						color: #707070;
					}
					
				}
				
			}
			.info{
				display: flex;
				flex: 1;
				.g-parameter{
					width: 34%;
				}
				.style-left,.style-right{
					width: 50%;
				}
				.result-box{
					display: flex;
					justify-content: space-between;
					font-size: 14px;
					line-height: 20px;
					width: 66%;
					li{
						margin-bottom: 20px;
						&:last-child{
							margin-bottom: 0;
						}
					}
					.tit{
						margin-bottom: 5px;
						color: #707070;
					}
					.content{
						color: #2d2d2d;
						span{
							position: relative;
							margin-right: 5px;
							border-radius: 4px;
							line-height: 24px;
							border: 1px solid #9d9d9d;
							padding: 0 25px 0 10px;
							i{
								position: absolute;
								top: 0;
								right: 0;
								width: 25px;
								height: 100%;
								background: url(../images/close.png) no-repeat center;
								background-size: 16px 16px;
								cursor: pointer;
								z-index: 12;
							}
							&:last-child{
								margin-right: 0;
							}
						}
					}
				}
			}
			.edit-button{
				position: absolute;
				top: 40px;
				right: 40px;
			}
		}
		.objects{
			.title{
				margin-bottom: 10px;
			}
			.category-t{
				margin-bottom: 30px;
				font-size: 15px;
				font-weight: bold;
				color: #4b4b4b;
			}
			.theader{
				display: flex;
				font-size: 12px;
				line-height:24px;
				color: #707070;
				border-bottom: solid 2px #bababa;
				span{
					flex: 1;
				}
			}
			.tbody{
				li{
					font-size: 15px;
					line-height: 20px;
					color: #4b4b4b;
					padding: 15px 0;
					display: flex;
					align-items: center;
					border-bottom: solid 1px #eaeaea;
					& > div{
						flex: 1;
					}
					.pricture{
						.img{
							width: 100px;
							height: 80px;
							border: 1px solid #ccc;
							box-sizing: border-box;
							border-radius: 4px;
							img{
								width: 100%;height: 100%;
							}
						}
					}
					.photos{
						.img{
							width: 80px;
							height: 80px;
							border-radius: 4px;
							img{
								width: 100%;
								height: 100%;
							}
						}
					}
					.key{
						margin-right:12px;
						font-weight: bold;
					}
					.measurement{
						
					}
				}
			}
		}
		.history{
			button{
				background: none;
				border: none;
				letter-spacing: 1px;
			}
			.theader{
				padding-bottom: 0;
				letter-spacing: 1px;
				ul{
					li{
						width: 20%;
						&:last-child{
							margin-left: auto;
							width:25%;
						}
					}
				}
			}
			.tbody{
				li{
					& > div{
						width: 20%;
					}
					.last-modified{
						width:25%;
						margin-left: auto;
						display: flex;
						justify-content: space-between;
						button{
							color: #d07d2d;
							font-size: 14px;
						}
					}
				}
			}
		}
	}
}

.report-box{
	.bd{
		.tit{
			margin-bottom: 20px;
			line-height: 35px;
			font-size: 26px;
			color: #d07d2d;
		}
		.item-style{
			padding: 20px 30px;
			height: 420px;
			box-sizing: border-box;
			background-color: #ffffff;
			box-shadow: 0px 2px 6px 0px rgba(32, 29, 51, 0.1);
			border-radius: 4px;
			box-sizing: border-box;
		}
		.content{
			height: calc(~'100% - 70px');
			& > div{
				width: 100%;
				height: 100%;
			}
		}
		.top,.small{
			display: flex;
			justify-content: space-between;
		}
		.top{
			margin-bottom: 20px;
			& > div{
				&:nth-child(1){
					width: 56%;
				}
				&:nth-child(2){
					width: 40.5%;
				}
			}
		}
		.small{
			& > div{
				width: 32%;
			}
		}
		.parameters{
			.g-table{
				.theader{
					li:nth-child(1){
						padding: 0;width: 35%;
					}
					li:nth-child(2){
						button{
							margin-left: 16px;
						}
					}
				}
				.tbody{
					li{
						.parameter{
							width: 35%;
						}
						.viewed{
							text-indent: 2em;
						}
					}
				}
			}
		}
		.top-user{
			.g-table{
				.theader{
					padding: 0;
					ul{
						align-items: center;
						line-height: 24px;
						justify-content: space-between;
						li{
							width: auto;
							&:nth-child(1){
								padding: 0;
							}
						}
					}
				}
				.tbody{
					li{
						justify-content: space-between;
						& > div{
							width: auto;
						}
						.visit{
							width: 46px;
						}
					}
				}
			}
		}	
	}
}
.canvas-box{
	border-top: 5px solid rgb(208,125,45);
	.hd{
		position: relative;
		z-index: 1;
		padding: 0 40px;
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0px 2px 6px 0px rgba(32, 29, 51, 0.1);
		background: #fff;
		.left{
			display: flex;
			align-items: center;
			font-size: 26px;
			color: #4b4b4b;
			font-weight: bold;
			h3{
				font-weight: bold;
			}
			a{
				margin-left: 15px;
				display: flex;
				width: 32px;
				height: 32px;
				background: url(../images/icon_15.png) no-repeat center;
				background-size: cover;
			}
		}
		.btns{
			button{
				margin: 0 5px;
				width: 66px;
			}
			.disabled{
				background: rgb(234,234,234);
				color: #bababa;
				border-color: rgb(234,234,234);
			}
		}
	}
	.bd{
		position: relative;
		display: flex;
		justify-content: space-between;
		height: calc(~'100vh - 75px');
		
	}
	.ft{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 20px 40px;
		box-sizing: border-box;
		display: flex;
		background: #fff;
		height: 200px;
		.tab{
			margin-bottom: 22px;
			font-size: 18px;
			line-height: 24px;
			li{
				width: auto;
				&.active{
					a{
						color: #e8984a;
						border-color: #e8984a;
					}
				}
			}
			a{
				padding-bottom: 5px;
				display: block;
				color: #707070;
				border-bottom: 3px solid transparent;
			}
		}
		.content-item{
			position: relative;
			&::before{
				content: '';
				position: absolute;
				top: 57px;
				left: 0;
				width: 100%;
				height: 24px;
				background: url(../images/bg_02.png) no-repeat center;
				background-size: cover;
				z-index: 9;
			}
			li{
				width: 100px;
				text-align: center;
				.img{
					height: 80px;
					overflow: hidden;
				}
				p{
					margin-top: 10px;
					font-size: 14px;
					color: #4b4b4b;
				}
			}
		}	
		.left{
			padding-right:20px;
			box-sizing: border-box;
			border-right: 1px solid #bababa;
			width: 60%;
			overflow: hidden;
		}
		.right{
			padding-left: 40px;
			flex: 1;
		}
	}
	.component-content{
		position: relative;
		flex: 1;
		background-image: url(../images/bg.png);
		background-size: 23px;
		.item{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}
	.product-sidebar,.parameter-slidebar{
		// position: absolute;
		// top:0;
		// left: 0;
		background-color: #fff;
		box-shadow: 0px 2px 6px 0px rgba(32, 29, 51, 0.1);
		height: calc(~'100vh - 75px');
		overflow: hidden;
	}
	.product-sidebar{
		width: 290px;
		&.product-sidebar-style{
			 .colla-content {
				ul{
					li{
						margin-right: 32px;
						width: 60px;
						&:nth-child(3n){
							margin-right: 0;
						}
					}
				}
			 }
		}
		.colla-item{
			border-bottom: 2px solid #eaeaea;
			&:last-child{
				border: none;
			}
		}
		.colla-tit{
			padding: 16px 20px;
			line-height: 1;
			font-size: 16px;
			cursor: pointer;
			h3::before{
				content: '';
				margin-right: 10px;
				display: inline-block;
				width: 10px;
				height: 6px;
				background: url(../images/icon_06.png) no-repeat center;
				background-size: cover;
				vertical-align: middle;
				transition: all .3s;
				transform: rotate(-90deg);
			}
			&.down{
				h3::before{
					transform: rotate(0);
				}
			}
		}
		.colla-content{
			padding: 0 20px!important;
			display: none;
			font-size: 12px;
			height: calc(~'100vh - 423px');
			overflow:hidden;
			.zl-scrollBarBox{
				right: 6px!important;
				background: none;
			}
			.zl-scrollBar{
				background: #EAEAEA;
				height: 120px!important;
			}
			
			a{
				display: block;
				color: #707070;
			}
			ul{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
			li{
				margin-bottom: 40px;
				width: 103px;
				text-align: center;
				line-height: 22px;
				&:hover{
					.img{
						border-color: rgb(235,167,101);
						&::after{
							display: block;
						}
					}
				}
				
				.img{
					position: relative;
					height: 78px;
					overflow: hidden;
					border: 1px solid transparent;
					border-radius: 5px;
					&::before{
						content: '';
						position: absolute;
						left: 0;
						bottom: 0;
						width: 100%;
						height: 28px;
						background: url(../images/bg_03.png) no-repeat center;
						background-size: cover;
						z-index: 1;
					}
					&::after{
						display: none;
						content:'';
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						width: 32px;
						height: 32px;
						background: url(../images/add.png) no-repeat center;
						background-size: cover;
					}
				}
				p{
					margin-top: 5px;
					font-size: 16px;
					color: #707070;
				}
			}
		}
	}
	.parameter-slidebar{
		position: relative;
		width: 300px;
		box-sizing: border-box;
		.close-button{
			position: absolute;
			top: 20px;
			right: 20px;
			width: 24px;
			height: 24px;
			background: url(../images/close.png) no-repeat center;
			background-size: cover;
			border: none;
		}
		.content{
			box-sizing: border-box;
			padding: 20px;
			width: 100%;
			height: 100%;
		}
		.title{
			margin-bottom: 30px;
			font-size: 22px;
			color: #9D9D9D;
		}
		.item{
			margin-bottom: 25px;
			.tit{
				margin-bottom: 5px;
				font-size: 14px;
				color: #707070;
			}
			.area{
				display: flex;
				flex-wrap: wrap;
				input{
					width: 50px;
					height: 24px;
					border: none;
					background: none;
					border-bottom: 1px solid #cccccc;
					box-sizing: border-box;
				}
				.radio-box{
					margin-top: 10px;
					width: 100%;
					display: flex;
					align-items: center;
					font-size: 12px;
					label{
						margin-right: 15px;
					}
				}
				.input-textarea{
					width: 100%;
					textarea{
						padding: 15px;
						display: block;
						width: 100%;
						height: 150px;
						border-radius: 5px;
						border: 1px solid #CCCCCC;
						box-sizing: border-box;
					}
				}
				.line-box{
					display: flex;
					.color-block,.size-block{
						display: flex;
						align-items: center;
					}
					.color-block{
						margin-right: 20px;
						display: flex;
						#picker{
							margin-left: 10px;
							width: 40px;
							height: 20px;
							border: none;
							border-radius: 5px;
						}
					}
					.size-block{
						input{
							margin: 0 10px;
							width: 20px;
						}
					}
				} 
			}
			
			select{
				border: none;
			}
			.lock{
				border: none;
				background: none;
				width:40px;
				height: 24px;
				background: url(../images/icon_16.png) no-repeat center;
				background-size: 16px;
			}
			 
			.width,.height{
				display: flex;
				align-items: center;
				input{
					margin-left: 10px;
					width: 50px;
					height: 24px;
					border: none;
					background: none;
					border-bottom: 1px solid #cccccc;
				}
			}
		}
		.list{
			li{
				margin-bottom: 30px;
				&:last-child{
					margin-bottom: 0;
				}
			}
			.input-block{
				background: url(../images/icon_06.png) no-repeat right center;
				input{
					width: 100%;
					height: 24px;
					background: none;
					border: none;
					border-bottom:1px solid #CCCCCC;
				}
			}
		}
		.sample{
			.file{
				height: 150px;
				
			}
		}
	}
	
}

.litepicker .container__months .month-item-header .button-next-month>svg{
	fill: #9d9d9d;
}
.litepicker .container__months .month-item-header .button-previous-month:hover, .litepicker .container__months .month-item-header .button-next-month:hover{
	svg{
		fill: #e8984a;
	}
	
}
.litepicker .container__days>div, .litepicker .container__days>a{
	padding: 12px 0;
}
.litepicker .container__days .day-item.is-in-range{
	background: rgb(251,234,219);
}
.litepicker .container__days .day-item.is-start-date{
	&::after{
		border-radius: 50% 0 0 50%;
	}
}
.litepicker .container__days .day-item.is-end-date{
	&::after{
		border-radius:0 50% 50% 0;
	}
}
.litepicker .container__days{
	position: relative;
	z-index: 9;
}
.litepicker .container__days .day-item.is-start-date,.litepicker .container__days .day-item.is-end-date{
	position: relative;
	background: #E8984A;
	border-radius: 50%;
	&::after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: rgb(251,234,219);
		z-index: -1;
	}
}
.litepicker .container__days .day-item:hover{
	color: #fff;
	box-shadow: none;
	border-radius: 50%!important;
	background: #E8984A;
}